<template>
  <view class="party-progress">
    <view class="progress-container">
      <view 
        v-for="(stage, index) in stages" 
        :key="index" 
        class="stage-item"
        :class="{ 
          'active': index === activeIndex, 
          'completed': index < activeIndex,
          'future': index > activeIndex
        }"
      >
        <view class="stage-icon">
          <image 
            :src="getStageIcon(index)" 
            mode="aspectFit"
          />
        </view>
        <view class="stage-content">
          <view class="stage-title">{{ stage.title || '未知阶段' }}</view>
          <view class="stage-time" v-if="stage.desc">{{ stage.desc }}</view>
        </view>
        
        <!-- 添加箭头，除了最后一项 -->
        <view v-if="index < stages.length - 1" class="arrow-down"
          :class="{
            'active-arrow': index < activeIndex,
            'current-arrow': index === activeIndex
          }">
          <view class="arrow-body"></view>
          <view class="arrow-head"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  stages: {
    type: Array,
    required: true,
    default: () => []
  },
  activeIndex: {
    type: Number,
    default: 0
  }
});

// 计算进度百分比
const progressPercent = computed(() => {
  if (props.stages.length <= 1) return 0;
  return props.activeIndex / (props.stages.length - 1);
});

// 根据阶段获取相应的图标
const getStageIcon = (index) => {
  const iconBase = '/static/images/party/';
  
  // 默认图标
  let iconName = 'default.svg';
  
  // 根据阶段和状态选择图标
  if (index < props.activeIndex) {
    // 已完成阶段
    iconName = 'completed.svg';
  } else if (index === props.activeIndex) {
    // 当前阶段
    iconName = 'current.svg';
  } else {
    // 未来阶段
    iconName = 'future.svg';
  }
  
  // 使用通用图标而不是特定阶段图标，因为特定阶段图标可能不存在
  if (index <= props.activeIndex) {
    // 当前或已完成阶段
    return index === props.activeIndex ? 
      iconBase + 'current.svg' : 
      iconBase + 'completed.svg';
  } else {
    // 未来阶段
    return iconBase + 'future.svg';
  }
};
</script>

<style lang="scss">
.party-progress {
  padding: 30rpx;
  
  .progress-container {
    position: relative;
    padding: 20rpx 0;
  }
  
  .stage-item {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 70rpx;
    padding: 25rpx;
    border-radius: 15rpx;
    background-color: #FAFAFA;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-3rpx);
      box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.08);
    }
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .stage-icon {
      position: relative;
      margin-right: 30rpx;
      width: 80rpx;
      height: 80rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
      
      image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        z-index: 2;
        box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
      }
    }
    
    .stage-content {
      flex: 1;
      
      .stage-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 10rpx;
      }
      
      .stage-time {
        font-size: 24rpx;
        color: #999;
      }
    }
    
    // 箭头样式
    .arrow-down {
      position: absolute;
      bottom: -50rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 40rpx;
      height: 40rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 10;
      
      .arrow-body {
        width: 6rpx;
        height: 30rpx;
        background-color: #E0E0E0;
      }
      
      .arrow-head {
        width: 0;
        height: 0;
        border-left: 12rpx solid transparent;
        border-right: 12rpx solid transparent;
        border-top: 12rpx solid #E0E0E0;
      }
    }
    
    .active-arrow {
      .arrow-body {
        background-color: #FFDE66;
      }
      
      .arrow-head {
        border-top-color: #FFDE66;
      }
    }
    
    .current-arrow {
      .arrow-body {
        background-color: #FF7A45;
      }
      
      .arrow-head {
        border-top-color: #FF7A45;
      }
    }
    
    &.active {      
      background-color: #FFF4F0;
      border: 1rpx solid rgba(255, 122, 69, 0.2);
      box-shadow: 0 4rpx 15rpx rgba(255, 122, 69, 0.15);
      
      .stage-content {
        .stage-title {
          color: #FF7A45;
        }
        
        .stage-time {
          color: #FF7A45;
        }
      }
    }
    
    &.completed {
      background-color: #FFFBEB;
      border: 1rpx solid rgba(255, 222, 102, 0.2);
      box-shadow: 0 4rpx 15rpx rgba(255, 222, 102, 0.15);
      
      .stage-content {
        .stage-title {
          color: #FFDE66;
        }
      }
    }
    
    &.future {
      opacity: 0.8;
    }
  }
}
</style> 